import React from 'react';
import { Link, hashHistory } from 'react-router';
import Button from 'antd/lib/button';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Input from 'antd/lib/input';
import ArticleImgs from './articlesImgs';

export default class Approval extends React.Component{
    backTo() {
        hashHistory.goBack();
    }
    render(){
        let _this = this;
        let approvalDiv = <div></div>
        if (this.props.isGuest !== undefined) {
            if (this.props.done===true) {
                approvalDiv = (<div  style={{margin:"0.5rem 0.5rem 0.2rem 0.5rem",display:"block"}}>
                    <Row>
                        <Col span="24">
                            <div style={{width:"100%",backgroundColor:"#fff",textAlign:"center",fontSize:"1.2rem",color:"green"}}>审评结束</div>
                        </Col>
                    </Row>
                </div>)
            } else {
                approvalDiv = (<div  style={{margin:"0.5rem 0.5rem 0.2rem 0.5rem",display:"block"}}>
                    <Input style={{marginBottom:"0.5rem"}} type="textarea" ref="comment" placeholder="审查结果......" autosize={{ minRows: 3, maxRows: 3 }} />
                    <Row>
                        <Col span="12" style={{textAlign: "center"}}><Button type="primary"  style={{width: "5rem"}} onClick={e => {_this.props.resolve(_this.refs.comment.refs.input.value)}}>同意</Button></Col>
                        <Col span="12" style={{textAlign: "center"}}><Button type="primary"  style={{width: "5rem"}} onClick={e => {_this.props.reject(_this.refs.comment.refs.input.value)}}>拒绝</Button></Col>
                    </Row>
                </div>)
            }
        }

        let detailPart = undefined;

        if(this.props.article.FileList.length > 0){
            let imgs = []
            let height = document.body.clientWidth*0.75;
            this.props.article.FileList.map(function(item){
                imgs.push(<img key={new Date().getTime() + ''} style={{width:"100%",height:height}} src={item}/>)
            });
            detailPart = <ArticleImgs imgs={imgs}/>
        }else{
            detailPart = <div><div style={{position: "relative"}}>
                            <img src={this.props.article.Image} style={{width:"100%"}}/>
                            <div id="article-title">
                                <h2><b>{this.props.article.Title}</b></h2>
                                <h5 className="small-font">{this.props.article.PublishedDate}</h5>
                            </div>
                            
                        </div>
                        <div className="article-style" style={{margin:"15px", textAlign:"left", lineHeight:"24px"}} dangerouslySetInnerHTML={{__html: this.props.article.Body}} />
                        </div>
                        
        }

        return( 
            <div>
                <div style={{backgroundColor:"white",minHeight:"600px",fontSize:"0.9rem"}}>
                    
                    {detailPart}
                </div>
                {
                    approvalDiv
                }
            </div>
        );
    }
}